<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form ref="info" :model="data" :rules="rules" :label-width="100">
        <FormItem :label="$t('pd2OJ1nukLDGQogYog-2V')" prop="title">
          <Input v-model="data.title" />
        </FormItem>
        <FormItem :label="$t('ghaBEXeX_LkakquZCMChC')" prop="content">
          <Input v-model="data.content" />
        </FormItem>
        <FormItem :label="$t('KMQM5FX8_E2lF4sgDZ1x5')" prop="isValid">
          <Select v-model="data.isValid">
            <Option value="0">无效</Option>
            <Option value="1">有效</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('2s2wsj14GFiLEJ6tDKsb6')" prop="type">
          <Select v-model="data.type">
            <Option value="system">{{$t('login_msg')}}</Option>
            <Option value="addStation">{{$t('fWvBXK8rl3k8SbVFAQ7Yp')}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save" v-if="status !== 'show'"
            >{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button
          >
          <Button style="margin-left: 8px" @click="close">{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { setFormData } from '@/api/data2'

export default {
  name: 'login_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    rules: Object,
    status: String
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      }
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    async save () {
      const formData = new FormData()
      for (const key in this.data) {
        formData.append(key, this.data[key])
      }
      const res = await setFormData(formData)
      if (res.status === 200) {
        this.$emit('success', _.cloneDeep(this.data))
      } else {
        this.$emit('fail')
      }
    }
  }
}
</script>
